<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    style="display: flex; flex-direction: column; flex: 1; height: 100%"
  >
    <div class="top_app">
      <div class="top_h">
        <div class="text">
          <span class="module_color">{{ DetailSLA?.name }}</span>
          <HStatus v-if="!DetailSLA?.status">启用</HStatus>
          <HStatus v-else type="info">禁用</HStatus>
        </div>
        <div style="display: flex; gap: 5px">
          <HPlainButton @click="goEditDetails(DetailSLA?.id)">编辑</HPlainButton>
          <HButton @click="onCancel">取消</HButton>
        </div>
      </div>
    </div>
    <div class="app-container" style="display: flex; flex-direction: column; flex: 1">
      <div class="content_inner">
        <!-- 基本信息 -->
        <h4 class="title_bl">基本信息</h4>
        <el-form :model="DetailSLA" class="basic_information" label-width="90px">
          <el-row>
            <el-col :lg="6" :sm="12">
              <el-form-item label="适用模块:">
                <span class="ml">{{ DetailSLA?.modules.join() }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :sm="12">
              <el-form-item label="提醒方式:">
                <span v-if="DetailSLA" class="ml">{{ Typefun() }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :sm="12">
              <el-form-item label="生效时间:">
                <span class="ml">
                  {{
                    DetailSLA?.dateType == 1
                      ? '全天'
                      : DetailSLA?.startTime + '-' + DetailSLA?.endTime
                  }}</span
                >
              </el-form-item>
            </el-col>
            <el-col :lg="6" :sm="12">
              <el-form-item label="描述:">
                <span class="ml"> {{ DetailSLA?.remark || '无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div
        class="content_inner"
        style="display: flex; flex-direction: column; flex: 1; height: 100%"
      >
        <h4 class="title_bl">触发条件</h4>
        <div style="flex: 1; position: relative; height: 100%; margin-bottom: 12px">
          <el-table
            :border="true"
            :data="DetailSLA?.conditionVos"
            height="100%"
            resizable
            stripe
            style="width: 100%; position: absolute"
          >
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column fixed label="序号" type="index" width="60" />
            <el-table-column label="触发条件" show-overflow-tooltip width="100">
              <template v-slot="i">
                <span v-for="item in typeList" :key="item.name">{{
                  i.row.type == item.val ? item.name : ''
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="right" label="节点时效" width="100">
              <template v-slot="i">
                <span>{{ i.row.ageingTime }}小时</span>
              </template>
            </el-table-column>
            <el-table-column label="提醒条件" show-overflow-tooltip width="120">
              <template v-slot="i">
                <div style="display: flex; align-items: center; gap: 7px">
                  <el-switch
                    v-model="i.row.enableBeforeOverTimeRemind"
                    :disabled="!i.row.enabled"
                    inline-prompt
                  />
                  <span
      
                    :style="{ color: i.row.disabled ? '#333' : '#999' }"
                    >超时前</span
                  >
                  <!-- <span v-else :style="{ color: i.row.disabled ? '#333' : '#999' }">超时后</span> -->
                </div>
                <span style="display: flex; align-items: center; gap: 7px">
                  <el-switch
                    v-model="i.row.enableAfterOverTimeRemind"
                    :disabled="!i.row.enabled"
                    inline-prompt
                  />
                  <!-- <span
                    :style="{ color: i.row.disabled ? '#333' : '#999' }"
                    v-if="i.row.enableAfterOverTimeRemind"
                    >超时前</span
                  > -->
                  <span :style="{ color: i.row.disabled ? '#333' : '#999' }" >超时后</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="提醒时间" min-width="90" show-overflow-tooltip>
              <template v-slot="i">
                <p v-if="i.row.enableBeforeOverTimeRemind"
                  >超时前：每{{ i.row.beforeOverTimeRemindTime }}小时</p
                >
                <p v-if="i.row.enableAfterOverTimeRemind"
                  >超时后：每{{ i.row.afterOverTimeRemindTime }}小时</p
                >
              </template>
            </el-table-column>
            <el-table-column label="提醒对象类型" min-width="90" show-overflow-tooltip>
              <template v-slot="i">
                <p v-if="i.row.enableBeforeOverTimeRemind"
                  >超时前：{{ befEmpType(i.row.beforeOverTimeRemindEmpType) }}</p
                >
                <p v-if="i.row.enableAfterOverTimeRemind"
                  >超时后：{{ befEmpType(i.row.afterOverTimeRemindEmpType) }}</p
                >
              </template>
            </el-table-column>
            <el-table-column label="提醒对象" min-width="90" show-overflow-tooltip>
              <template v-slot="i">
                <p v-if="i.row.enableBeforeOverTimeRemind"
                  >超时前：{{ i.row.slaBeforeOverTimeRemindEmps?.join() || '无' }}</p
                >
                <p v-if="i.row.enableAfterOverTimeRemind"
                  >超时后：{{ i.row.slaAfterOverTimeRemindEmps?.join() || '无' }}</p
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { getDetail } from '../../../api/sla'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.slaDetailSet,
  })

  //超时前、后提醒人员
  const OverTimeRemindEmpType = ref([
    { name: '工单客服', val: '1' },
    { name: '指定人员', val: '2' },
    { name: '服务商负责人', val: '3' },
    { name: '工程师', val: '4' },
  ])
  const remindModeList = ref([
    { name: '系统消息', val: '1' },
    { name: '微信', val: '2' },
    { name: '短信', val: '3' },
  ])
  //触发条件类型
  const typeList = ref([
    { name: '未分配客服', val: 1 },
    { name: '未派单', val: 2 },
    { name: '服务商未接单', val: 3 },
    { name: '工程师未接单', val: 4 },
    { name: '工程师未拨打电话', val: 5 },
    { name: '工程师未预约', val: 6 },
    { name: '工程师未签到', val: 7 },
  ])
  const router = useRouter()
  const route = useRoute()
  const loading = ref(false)
  const DetailSLA = ref(null)

  // 提醒方式
  const Typefun = () => {
    let str = []
    remindModeList.value.filter((o) => {
      if (DetailSLA.value?.remindMode.includes(o.val)) {
        str.push(o.name)
      }
    })
    return str.join()
  }
  const befEmpType = (arr) => {
    let str = []
    OverTimeRemindEmpType.value.filter((o) => {
      if (arr.includes(o.val)) {
        str.push(o.name)
      }
    })
    return str.join()
  }
  const goEditDetails = (id: string) => {
    router.push('/sla/slanew/' + id)
  }
  // 根据工单策略SLA ID获取详情
  const getDetailSLA = async () => {
    if (!route.params.id) return
    loading.value = true
    await getDetail(route.params.id).then((res) => {
      if (res) {
        if (res.data.code == 20000) {
          DetailSLA.value = res.data.data.row
        } else {
          if (res.data.isError)
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 4000,
              offset: 200,
            })
        }
      }
    })
    loading.value = false
  }
  // 取消
  const onCancel = () => {
    router.push({ path: '/busic/base/orderset', query: { active: 'OrderSLA' } })
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'detailSLA') {
        getDetailSLA()
      }
    },
  )

  onMounted(async () => {
    getDetailSLA()
  })
</script>

<style lang="scss" scoped>
  @import './detail';
</style>
